<script setup lang="ts">
  import { ref } from 'vue';
  import lightOff from './assets/关灯.svg'
  import lightOn from './assets/开灯.svg'

  const isOn = ref(false)
  const changeImage = ()=>{
    isOn.value = !isOn.value
  }
</script>
<template>
 <!-- 当点击按钮时，调用changeImage()函数以改变图片 -->
<button @click="changeImage()">点击切换</button>

<!-- 根据isOn的值动态绑定class，isOn为true时绑定'isActive'类 -->
<p :class="isOn? 'isActive':''">{{ isOn }}</p>

<!-- 动态绑定class，isOn为true时，'isActive'属性为true，从而应用该类 -->
<p :class="{isActive : isOn}">{{ isOn }}</p>

<!-- 根据isOn的值动态绑定背景色，isOn为true时背景色为red，否则无背景色 -->
<p :style="{backgroundColor : isOn ? 'red' : ''}"> 动态绑定 style</p>

<!-- 根据isOn的值动态绑定图片源，isOn为true时使用lightOn，否则使用lightOff -->
<img :src="isOn ? lightOn :lightOff" alt="">
</template>
<style scoped>
  .isActive{
    color: red;
  }
</style>

